// js  scss  html 

// 配置文件 gulp 要做的事情
const gulp = require('gulp')

// api   gulp是对象

var sass = require('gulp-sass');
sass.compiler = require('node-sass');

// 
// 定义任务  任务名  回调函数-》任务要做的事情
// 执行任务  终端输入 gulp sass
gulp.task('sass', function (cb) {
  //任务的代码
  console.log('sass 的处理的任务 代码');
  // 1- 获取要处理的scss文件夹中 所有scss文件  -流 
  gulp.src('src/scss/*.scss')//文件流
    // 2- 借助插件 gulp-sass  编译scss 
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))//管道函数

    // 3-编译完 的文件 放到 dist/css文件夹
    .pipe(gulp.dest('dist/css'))//管道函数
    .pipe(gulp.dest('src/css'))//管道函数

  cb()//任务完成了
})

// 定义了任务  专门监听  ./src/scss/**/*.scss 文件的变化 一旦有变化就会 执行 sass任务
gulp.task('sass:watch', function () {
  // gulp.watch('./src/scss/**/*.scss', ['sass']);
  gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
})


const babel = require('gulp-babel');
var uglify = require("gulp-uglify");
// 执行任务  终端输入 gulp js
gulp.task('js', function (cb) {
  //任务的代码
  console.log('js 的处理的任务 代码');
  // 1- 获取要处理的js文件夹中 所有js文件  -流 
  gulp.src('./src/js/**/*.js')

    // 编译js  高版本 转es5
    .pipe(babel({
      presets: ['@babel/env']
    }))
    // 2- 借助插件 压缩js   
    .pipe(uglify())
    // 3-编译完 的文件 放到 dist/js文件夹
    .pipe(gulp.dest('./dist/js'))
  cb()//任务完成了
})

gulp.task('js:watch', function () {
  // gulp.watch('./src/scss/**/*.scss', ['sass']);
  gulp.watch('./src/js/**/*.js', gulp.series('js'));
})

// 合并js
var concat = require('gulp-concat');
gulp.task('scripts', function () {
  return gulp.src('./src/js/login/*.js')
    .pipe(concat('login.js'))
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
    .pipe(gulp.dest('./src/js'));
});


const htmlmin = require('gulp-htmlmin');
gulp.task('minify', () => {
  console.log('html 的处理的任务 代码');
  return gulp.src('src/**/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
});


var connect = require("gulp-connect");

// 刷新html页面
gulp.task("connect", function (cb) {
  gulp.src("./src/**/*.html").pipe(connect.reload());
  cb()
});
//
gulp.task("server", function () {
  //  启动服务器
  connect.server({
    livereload: true,
  });
  // 监听文件的变化，一旦文件有变化就执行 后面数组的任务
  gulp.watch("./src/js/**/*.js", gulp.series("js"));
  gulp.watch("./src/js/**/*.js", gulp.series("connect"));
  gulp.watch("./src/css/*.css", gulp.series("connect"));
  gulp.watch("./src/scss/*.scss", gulp.series("sass"));
  gulp.watch("src/**/*.html", gulp.series("minify"));
  gulp.watch("src/**/*.html", gulp.series("connect"));
});



// const imagemin = require('gulp-imagemin');
// gulp.task('imagemin', function (cb) {
//   gulp.src('src/images/*')
//     .pipe(imagemin())
//     .pipe(gulp.dest('dist/images'))
//   cb()
// })



gulp.task('build', gulp.series(['js', 'sass', 'minify']), function () {
  console.log('项目的构件压缩完毕！');
})